<template>
	<div>
		<div class="topImg">
			<img style="width: 100%;height: 214px;" :src="info.picUrl" />
			<div class="py">
				<span class="pp">可选颜色</span>
				<img style="width:25px;height: 25px;" :src="info.picUrl" />
				<img style="width:25px;height: 25px;" :src="info.picUrl" />
				<img style="width:25px;height: 25px;" :src="info.picUrl" />

			</div>
			<!-- 价格 -->
			<div class="jiage">
				<div class="jiageFlet">
					<div>
						¥{{brand.floorPrice}}
						<span>卷后价¥{{brand.floorPrice}}</span>
					</div>
					<div class="Fletdi">
						<span style="text-decoration: line-through">¥{{brand.floorPrice}}</span>
						3.4折
					</div>
				</div>

				<div>
					<h3>便宜好吃</h3>
				</div>
			</div>
			<div class="mian">
				<span>{{brand.desc}}</span>
				<div class="mianHb">
					<span class="mianBt">七天可退</span>
					<span class="mianBt">首单35元</span>
					<span class="mianBt">七天可退</span>
				</div>
			</div>
			<!-- 便宜 -->
			<div class="pianyi">
				<span>保证便宜</span>
				<span class="pianyiHui">100%便宜 专业团队鉴定</span>
			</div>

			<van-cell-group>
				<van-cell value-class='lan' title="尺码" value="查看尺寸" />
			</van-cell-group>
			<div class="fen">
				<van-button disabled color="#B4B4B4" plain>s</van-button>
				<van-button color="#F688A4" plain>s</van-button>
				<van-button color="#131212" plain>m</van-button>
				<van-button color="#131212" plain>L</van-button>
				<van-button color="#131212" plain>L</van-button>
				<van-button color="#131212" plain>L</van-button>
				<van-button color="#131212" plain>L</van-button>
				<van-button color="#131212" plain>L</van-button>

			</div>
			<van-cell-group>
				<van-cell title="全部评价" value-class='lan' value="查看跟多" @click='to()' />

			</van-cell-group>
			<div>
				<div>

					<div v-for='com in comment'>
						<van-cell :icon="com.avatar" color="#F97899" :title="com.nickname" :value="com.addTime" />
						<div class="plun">
							{{com.content}}
						</div>
					</div>




				</div>
				<!-- 常见问题 -->

				<div>
					<img style="width: 100%; margin-top: 15px;" src="../assets/img/1.png" />
				</div>
				<img style="width: 100%;height: 214px;" :src="brand.picUrl" />
				<!-- 	<img src="../assets/img/2.png" /> -->
				<div class="commend">
					<span>大家都在看</span>
				</div>

				<div class="hui">
					<div class="commendMian" v-for="(tui,i) in relatedGoods" :key='i'>
						<img class="commendImg" :src="tui.picUrl" />
						<span class="flet">{{tui.name}}</span>
						<div class="commendyuan">
							<span>¥{{tui.retailPrice}}元</span>
						</div>
						<div class="commendNumber">
							<span>{{tui.retailPrice-90}}人购买</span>
							<!-- <van-icon name="shopping-cart" color="#F688A4" size="30" /> van-icon中这个组件没有引入用是 -->
						</div>
					</div>
				</div>

			</div>
			<van-sku v-model="show" :sku="sku" :quota-used="quota_used"     :initial-sku="initialSku"  
			 :quota="quota" :goods="goods"  @buy-clicked="onBuyClicked"
  @add-cart="onAddCartClicked" @stepper-change='shu' />
  

  
			<!-- 
 :goods-id="goodsId"

  
  :hide-stock="sku.hide_stock"

  -->
			<!-- 底部 -->
			<van-goods-action>
				<van-goods-action-icon icon="chat-o" to='/my' text="我的" />
				<van-goods-action-icon icon="shop-o" to='/gwc' text="购物车" />
				<van-goods-action-button color="#F688A4" @click="jiaru()" type="warning" text="加入购物车" />
				<van-goods-action-button type="danger" text="立即购买" @click='liji()'/>
			</van-goods-action>
		</div>
	</div>

</template>

<script>
	import {
		Tab,
		Tabs,
		Image,
		Toast,
		Sku
	} from 'vant';
	import API from '../utils/API.js'

	export default {
		data() {
			return {
				active: 2,
				id: null,
				brand: {},
				comment: [],
				relatedGoods: [],
				productList: [],
				specificationList:[],
				quota:3,
				quota_used: 0,  //已经购买过的数量
				info: {},
				show: false,
				ev:1,
				sku: {
					// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
					// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
					tree: [{
						k: '规格', // skuKeyName：规格类目名称
						k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
						v: [{
								id: '1', // skuValueId：规格值 id
								name: '12', // skuValueName：规格值名称
								imgUrl: 'http://yanxuan.nosdn.127.net/583812520c68ca7995b6fac4c67ae2c7.png', // 规格类目图片，只有第一个规格类目可以定义图片
								previewImgUrl: 'http://yanxuan.nosdn.127.net/583812520c68ca7995b6fac4c67ae2c7.png', // 用于预览显示的规格类目图片
							},

						],

						largeImageMode: false, //  是否展示大图模式
					}],
					// 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
					list: [{
						id: 2259, // skuId
						s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
						price: '', // 价格（单位分）
						stock_num: 110 // 当前 sku 组合对应的库存
					}],
					price: 10, // 默认价格（单位元）
					stock_num: 227, // 商品总库存
					collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
					none_sku: false, // 是否无规格商品
					hide_stock: false // 是否隐藏剩余库存
				},
				goods: {
					// 默认商品 sku 缩略图
					picture: '',
				},
initialSku:{
	// 商品 id
	  goodsId: '946755',
	  selectedNum: 0,  //购买数量
}

			};
		},
		mounted() {
			this.id = this.$route.query.id //把id页面搜索的值传过来
			this.$get(API.GET_GOODS_DETAIl, {
					id: this.id
				})
				.then(res => {
					this.brand = res.data.data.brand
					this.info = res.data.data.info
					this.comment = res.data.data.comment.data
					this.relatedGoods = res.data.data.relatedGoods
					this.productList = res.data.data.productList //商品规格数量列表
					this.relatedGoods = res.data.data.relatedGoods[0] //不同规格商品列表
					this.specificationList=res.data.data.specificationList[0]
					console.log(res.data.data)
					console.log(this.productList)
					console.log(this.goods.picture)

				})
			console.log(this.id)
		},
		comments: {
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[Toast.name]: Toast,
			[Image.name]: Image,
			[Sku.name]: Sku

		},
		methods: {
			jiaru() { //加入购物车
				this.show = true
				this.goods.picture = this.productList[0].url
				this.sku.tree[0].v[0].previewImgUrl = this.productList[0].url
				this.sku.tree[0].v[0].imgUrl = this.productList[0].url
				this.sku.price = this.productList[0].price
				this.sku.list[0].price = this.productList[0].price
				this.sku.tree[0].v[0].name = this.relatedGoods.name
			
				// console.log(this.sku)
				// console.log(this.relatedGoods.name)
			},
			liji(){ //立即购买
				this.onBuyClicked()
			},
			onClickIcon() {
				Toast('点击图标');
			},
			onClickButton() {
				Toast('点击按钮');
			},
			to() {
				this.$router.push({
					path: '/particulars/pinglun',
					query: {
						id: this.id
					}
				})
			},
			onBuyClicked(){ //立即购物 
				console.log('立即购物')
					let token = this.$store.state.token
				this.$post(API.POST_CART_FASTADD,{
					token:token,
					goodsId:this.specificationList.valueList[0].goodsId,
					 number:this.ev,
					productId:this.specificationList.valueList[0].id,
				})
				.then(res =>{
					Toast(res.data.errmsg)
					console.log(res)
				})
			},
			onAddCartClicked(event){  // 加入购物车
			console.log(event)
				let token = this.$store.state.token
				 // console.log(this.specificationList.valueList[0].id)
				 // console.log(this.specificationList.valueList[0].goodsId)
				//  console.log(this.ev)
				this.$post(API.POST_CART_ADD,{
					token:token,
					goodsId:this.specificationList.valueList[0].goodsId,
					 number:this.ev,
					productId:this.specificationList.valueList[0].id,
				
				})
				.then(res =>{
					Toast(res.data.errmsg)
					// console.log(res)
					this.$router.push({
						path: '/gwc',
					})
				})
				
			},
			shu(event){
				this.ev=event
				console.log(event)
			},
		},
		
		created() {

		}
	};
</script>

<style>
	.topImg {
		width: 100%;
		height: 100%;
		padding-bottom: 70px;
	}

	.py {
		margin-left: 14px;
		display: flex;
		justify-content: space-around;
		width: 200px;
		margin-top: 5px;
	}

	.pp {
		font-size: 12px;
	}

	.jiage {
		display: flex;
		align-items: center;
		margin-top: 15px;
		padding: 0 10px;

		width: 100%;
		height: 74px;
		color: #FFFFFF;
		box-sizing: border-box;
		background-image: url(../assets/img/tt.png);
	}

	.jiageFlet {
		flex: 1;
		font-size: 26px;
	}

	.jiageFlet span:nth-child(1) {
		font-size: 16px;
	}

	.Fletdi {
		font-size: 12px;
	}

	.mian {
		margin-top: 20px;
		padding: 0 10px;
	}

	.mianBt {
		background-color: #36C88E;
		color: #FFFFFF;
		font-size: 13px;
		padding: 2px 3px;
	}

	.mianHb {
		display: flex;

		margin-top: 5px;


	}

	.mianHb span {
		margin-left: 8px;
	}

	.pianyi {
		margin-top: 25px;
		margin-left: 10px;
		color: #DE3D96;
	}

	.pianyiHui {
		font-size: 12px;
		color: #888888;
		margin-left: 12px;
	}

	.lan {
		color: #4A90E2;
	}

	.fen {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		height: 150px;
		width: 100%;
	}

	.van-button--normal {
		padding: 0 32px;
		margin-top: 10px;
		font-size: 20px;
	}

	.van-goods-action {
		z-index: 100;
	}

	.van-icon-manager::before {
		content: '\F081';
		color: #F03867;
	}

	.plun {
		padding: 10px;
	}

	* {
		margin: 0;
		padding: 0;
	}

	/*  */
	.commend {
		display: flex;
		padding: 20px 20px;
		font-size: 3px;

	}

	.commend span:nth-child(2) {
		color: #969696;
	}

	.commend span:nth-child(1) {
		position: relative;
		flex: 1;
		text-align: center;
		font-size: 13px;
	}

	.commend span:nth-child(1)::after {
		position: absolute;
		content: "";
		top: 6px;
		right: 20px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}

	.commend span:nth-child(1)::before {
		position: absolute;
		content: "";
		top: 6px;
		left: 20px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}

	/*  */
	.hui {
		display: flex;
		flex-wrap: wrap;

	}

	.commend {
		display: flex;

		padding: 20px 20px;
		font-size: 3px;

	}

	.commend span:nth-child(2) {
		color: #969696;
	}

	.commend span:nth-child(1) {
		position: relative;
		flex: 1;
		text-align: center;
		font-size: 13px;
	}

	.commend span:nth-child(1)::after {
		position: absolute;
		content: "";
		top: 6px;
		right: 34px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}

	.commend span:nth-child(1)::before {
		position: absolute;
		content: "";
		top: 6px;
		left: 34px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}

	.commendMian {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 5px 10px 0;
		width: 191px;
		height: 199px;
		background-color: #ffffff;
		box-sizing: border-box;
		border-right: 0;
		/* 解决相邻border重合加粗问题 */
		margin: 0 -1px -1px 0;
		border: 1px solid #b5b5b5;
	}

	.commendMian:nth-child(odd) {
		border-left: 0;
	}

	.commendMian:nth-child(2n) {
		border-right: 0;

	}

	.commendMian:nth-child(1) {
		border-top: 0;
	}

	.commendMian:nth-child(2) {
		border-top: 0;
	}

	.flet {
		margin-left: -5px;

	}

	.commendImg {
		width: 139px;
		height: 91px;
		margin-bottom: 5px;
	}

	.commendyuan {
		margin-top: 6px;
		color: red;
		font-weight: 550;
	}

	.commendyuan span:nth-child(2) {
		margin-left: 5px;
		color: #98989F;
		text-decoration: line-through;
	}

	.commendNumber {

		display: flex;
		padding-right: 15px;
		margin-top: 10px;
		font-size: 14px;
	}

	.commendNumber span:nth-child(1) {
		flex: 1;
	}
</style>
